<template>
  <div class="demo">
    <Header :title="highscore.title" :subtitle="highscore.subtitle"></Header>
    <div class="app">
      <template v-for="item in list" :key="item.id">
        <HouseItem :picture="item.picture_url" :messages="item.verify_info.messages" :name="item.name"
          :price="item.price_format" :content="item.bottom_info.content">
        </HouseItem>
      </template>
    </div>
  </div>

</template>

<script>
import highscore from '@/data/high_score.json'
import Header from '@/components/Header.vue'
import HouseItem from '@/components/HouseItem.vue'
export default {
  data() {
    return {
      highscore,
      list: highscore.list
    }
  },
  components: {
    Header,
    HouseItem
  }
}
</script>

<style scoped>
.app {
  margin: 0 auto;

}

.demo {
  /*此元素会作为一个表格单元格显示
            （类似 <td> 和 <th>）*/
  display: table-cell;
  /*垂直居中 */
  vertical-align: middle;
  /*水平居中*/
  text-align: center;


}
</style>